<!DOCTYPE html>
<html>
<head>
	<title>SelectMenu使用文档</title>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="../lib/bootstrap/3.3.7/css/bootstrap.min.css" />
	<link rel="stylesheet" href="../lib/font-awesome-4/css/font-awesome.min.css" />

    <link rel="stylesheet" href="../lib/syntaxhighlighter/styles/shCore.css" type="text/css">
    <link rel="stylesheet" href="../lib/syntaxhighlighter/styles/shThemeDefault.css" type="text/css">

    <link rel="stylesheet" href="../lib/selectmenu/selectmenu.css" type="text/css">
    
	<link rel="stylesheet" href="../css/selectmenu/header.css" />
	<link rel="stylesheet" href="../css/selectmenu/docs.css" />

</head>

<body>
    <div class="content">
        <div class="container">
			<div class="row">
				<div class="col-md-3">
					<div class="navBox">
					<ul class="nav" id="nav">
						<li class="current"><a href="#data">* data</a></li>
						<li><a href="#showField">* showField</a></li>
						<li><a href="#keyField">* keyField</a></li>
						<li><a href="#lang">lang</a></li>
						<li><a href="#searchField">searchField</a></li>
						<li><a href="#search">search</a></li>
						<li><a href="#title">title</a></li>
						<li><a href="#regular">regular</a></li>
						<li><a href="#rightClick">rightClick</a></li>
						<li><a href="#arrow">arrow</a></li>
						<li><a href="#position">position</a></li>
						<li><a href="#embed">embed</a></li>
						<li><a href="#initSelected">initSelected</a></li>
						<li><a href="#multiple">multiple</a></li>
						<li><a href="#listSize">listSize</a></li>
						<li><a href="#selectToCloseList">selectToCloseList</a></li>
						<li><a href="#formatItem">formatItem</a></li>
						<li><a href="#andOr">andOr</a></li>
						<li><a href="#orderBy">orderBy</a></li>
						<li><a href="#eSelect">eSelect</a></li>
						<li><a href="#eTabSwitch">eTabSwitch</a></li>
						<li><a href="#eHidden">eHidden</a></li>
						<li><a href="#selectMenuHide">$.fn.selectMenuHide</a></li>
						<li><a href="#selectMenuClear">$.fn.selectMenuClear</a></li>
						<li><a href="#selectMenuValues">$.fn.selectMenuValues</a></li>
					</ul>
					</div>
				</div>
				<div class="col-md-9 propertiesBox">
					<div class="row" id="data">
						<h3>data <small>菜单数据源</small></h3>
						<ul>
							<li><strong>类型：</strong><code>array | function</code></li>
							<li><strong>默认值：</strong><code>无默认值，该参数为必填参数</code></li>
							<li><strong>使用方式：</strong>
								<div class="usageBox">
									<p>数据源共分三种格式：常规菜单格式，多功能菜单格式（单组格式、分组格式）</p>
                                    <p>常规菜单格式</p>
                                    <pre class="brush: js">
//常规菜单使用的数据格式
/**
 * content  [string]   : 菜单项目显示文本，支持HTML格式（设置内容为“sm_divider”可生成分隔栏）
 * header   [boolean]  : 是否为子标题栏
 * url      [string]   : 需要跳转的链接
 * callback [function] : 需要执行的回调函数
 * disabled [boolean]  : 是否禁用菜单项目
 */
var menuData = [
    {content:'News Site',header: true},//定义子标题栏
    {content:'163 NetEase',url : 'http://www.163.com'},//链接跳转型菜单项目
    {content:'sm_divider'},//分隔栏
    //使用HTML的方式设置菜单显示的内容，并定义菜单项目为禁用
    {content:'<i class="fa fa-fw fa-facebook"></i> Facebook',url : 'https://www.facebook.com'},
    {content:'Twitter',url : 'https://twitter.com',disabled : true},
    //点击后执行回调的菜单项目
    {content:'Click this menu item to trigger your callback',callback : function(){
        bDialog.alert('you can do anything in callback!');
    }}
];
                                    </pre>
                                    <p>多功能菜单格式，单组数据格式</p>
                                    <pre class="brush: js">
//多功能菜单使用的示例数据格式
//数据格式与常规菜单模式的固定格式不同，该模式下，字段的名称、数量可以完全自定义
//并通过设置keyField、showField、searchField等参数进行指定具体使用的数据节点
var selectMenuData = [
    {id:1 ,name:'Chicago Bulls',desc:'芝加哥公牛',abbr:'CHI'},
    {id:2 ,name:'Cleveland Cavaliers',desc:'克里夫兰骑士',abbr:'CLE'},
    {id:3 ,name:'Detroit Pistons',desc:'底特律活塞',abbr:'DET'},
    {id:4 ,name:'Indiana Pacers',desc:'印第安纳步行者',abbr:'IND'},
    {id:5 ,name:'Milwaukee Bucks',desc:'密尔沃基雄鹿',abbr:'MIL'}
];
                                    </pre>
                                    <p>多功能菜单格式，多分组格式</p>
                                    <pre class="brush: js">
//多分组格式数据，要求数据必须按照以下格式设置
//但list节点内的数据，与不分组的数据格式一样，可以自由定义
var selectMenuGroupData = [{
    title : 'East',
    list :[
        {id:1 ,name:'Chicago Bulls',desc:'芝加哥公牛',abbr:'CHI'},
        {id:2 ,name:'Cleveland Cavaliers',desc:'克里夫兰骑士',abbr:'CLE'}
    ]
},{
    title : 'West',
    list : [
        {id:16,name:'Denver Nuggets',desc:'丹佛掘金',abbr:'DEN'},
        {id:17,name:'Minnesota Timberwolves',desc:'明尼苏达森林狼',abbr:'MIN'}
    ]}
];
                                    </pre>

                                    <p>设置data为function时，插件可以动态获取菜单数据格式，但数据格式必须满足以上三种其中一种</p>
								</div>
							</li>
						</ul>
					</div>
					<div class="row" id="showField">
						<h3>showField <small>显示在列表中的数据字段</small></h3>
						<ul>
							<li><strong>类型：</strong><code>string</code></li>
							<li><strong>默认值：</strong><code>'name'</code></li>
							<li><strong>使用方式：</strong>
								<div class="usageBox">
								设置的值为data数据源中的数据字段名
								</div>
							</li>
						</ul>
					</div>
					<div class="row" id="keyField">
						<h3>keyField <small>数据代码列</small></h3>
						<ul>
							<li><strong>类型：</strong><code>string</code></li>
							<li><strong>默认值：</strong><code>'id'</code></li>
							<li><strong>使用方式：</strong>
								<div class="usageBox">
								设置的值为data数据源中的数据字段名
								</div>
							</li>
						</ul>
					</div>
					<div class="row" id="lang">
						<h3>lang <small>插件语言，默认为'cn'简体中文</small></h3>
						<ul>
							<li><strong>类型：</strong><code>string</code></li>
							<li><strong>默认值：</strong><code>'cn'</code></li>
							<li><strong>使用方式：</strong>
								<div class="usageBox">
								可设置的语言
								<table class="table table-bordered" style="background-color: white;">
									<thead>
										<tr>
											<th>代码</th>
											<th>语言</th>
											<th>描述</th>
										</tr>
									</thead>
									<tbody>
										<tr>
											<td>cn</td>
											<td>Chinese</td>
											<td>中文</td>
										</tr>
										<tr>
											<td>en</td>
											<td>English</td>
											<td>英文</td>
										</tr>
										<tr>
											<td>de</td>
											<td>German</td>
											<td>德语</td>
										</tr>
										<tr>
											<td>es</td>
											<td>Spanish</td>
											<td>西班牙语</td>
										</tr>
										<tr>
											<td>pt-br</td>
											<td>Brazilian Portuguese</td>
											<td>巴西葡萄牙语</td>
										</tr>
										<tr>
											<td>ja</td>
											<td>Japanese</td>
											<td>日语</td>
										</tr>
									</tbody>
								</table>
								</div>
							</li>
						</ul>
					</div>
					<div class="row" id="searchField">
						<h3>searchField <small>查询关键字字段</small></h3>
						<ul>
							<li><strong>类型：</strong><code>string</code></li>
							<li><strong>默认值：</strong><code>无</code></li>
							<li><strong>使用方式：</strong>
								<div class="usageBox">
								查询字段，设置具体查询的字段，不设置则默认使用showField设置的字段
								</div>
							</li>
						</ul>
					</div>
					<div class="row" id="multiple">
						<h3>multiple <small>多选模式</small></h3>
						<ul>
							<li><strong>类型：</strong><code>boolean</code></li>
							<li><strong>默认值：</strong><code>false</code></li>
							<li><strong>使用方式：</strong>
								<div class="usageBox">
								设置插件选择模式，默认为单选模式
								</div>
							</li>
						</ul>
					</div>
					<div class="row" id="search">
						<h3>search <small>是否显示快速搜索输入框</small></h3>
						<ul>
							<li><strong>类型：</strong><code>boolean</code></li>
							<li><strong>默认值：</strong><code>true</code></li>
							<li><strong>使用方式：</strong>
								<div class="usageBox">
								<p>设置插件是否显示快速搜索输入框</p>
								<p>仅在多功能菜单模式下可用</p>
								</div>
							</li>
						</ul>
					</div>
                    <div class="row" id="title">
                        <h3>title <small>标题栏文本</small></h3>
                        <ul>
                            <li><strong>类型：</strong><code>string | boolean</code></li>
                            <li><strong>默认值：</strong><code>'SelectMenu'</code></li>
                            <li><strong>使用方式：</strong>
                                <div class="usageBox">
                                    <p>设置标题栏显示的文本内容，设置为<code>false</code>时，关闭标题栏</p>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="row" id="regular">
                        <h3>regular <small>常规菜单模式</small></h3>
                        <ul>
                            <li><strong>类型：</strong><code>boolean</code></li>
                            <li><strong>默认值：</strong><code>false</code></li>
                            <li><strong>使用方式：</strong>
                                <div class="usageBox">
                                    <p>设置菜单为常规菜单模式，所谓常规菜单模式，即为显示菜单项目，可以链接跳转，可以执行回调，但菜单本身没有其它更多的功能</p>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="row" id="rightClick">
                        <h3>rightClick <small>鼠标右键触发模式</small></h3>
                        <ul>
                            <li><strong>类型：</strong><code>boolean</code></li>
                            <li><strong>默认值：</strong><code>false</code></li>
                            <li><strong>使用方式：</strong>
                                <div class="usageBox">
                                    <p>设置插件的打开模式为在指定的区域中点击鼠标右键，插件的默认展开方式为按钮或链接等对象点击后触发</p>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="row" id="arrow">
                        <h3>arrow <small>在弹出式菜单的模式下（非嵌入式，非鼠标右键模式），是否显示箭头</small></h3>
                        <ul>
                            <li><strong>类型：</strong><code>boolean</code></li>
                            <li><strong>默认值：</strong><code>false</code></li>
                            <li><strong>使用方式：</strong>
                                <div class="usageBox">
                                    <p>设置插件是否在菜单上增加箭头，并指向打开菜单的父对象的气泡展示方式</p>
                                    <p>在嵌入式<code>embed:true</code>或鼠标右键<code>rightClick:true</code>模式下无效</p>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="row" id="position">
                        <h3>position <small>菜单对齐方向</small></h3>
                        <ul>
                            <li><strong>类型：</strong><code>string</code></li>
                            <li><strong>默认值：</strong><code>'left'</code></li>
                            <li><strong>使用方式：</strong>
                                <div class="usageBox">
                                    <p>设置菜单对齐调用对象的方向</p>
                                    <p>
                                        <ul>
                                            <li><code>'left'</code>：左对齐（默认）</li>
                                            <li><code>'center'</code>：居中对齐</li>
                                            <li><code>'right'</code>：右对齐</li>
                                        </ul>
                                    </p>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="row" id="embed">
                        <h3>embed <small>将菜单嵌入到页面中，非弹出层模式</small></h3>
                        <ul>
                            <li><strong>类型：</strong><code>boolean</code></li>
                            <li><strong>默认值：</strong><code>false</code></li>
                            <li><strong>使用方式：</strong>
                                <div class="usageBox">
                                    <p>设置是否将菜单嵌入到页面中</p>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="row" id="initSelected">
                        <h3>initSelected <small>插件初始选中项目值指定</small></h3>
                        <ul>
                            <li><strong>类型：</strong><code>any</code></li>
                            <li><strong>默认值：</strong><code>undefined</code></li>
                            <li><strong>使用方式：</strong>
                                <div class="usageBox">
                                    <p>设置插件初始选中项目值指定，该值会与option.keyField字段进行匹配，若匹配到，则自动设置选中并高亮</p>
                                    <p>初始化数据功能仅在多功能模式下可用（<code>regular:false</code>），且由于数据内容字段及数据类型均可以自定义，所以这里设置的内容的数据格式根据实际使用中的数据格式进行设置</p>
                                </div>
                            </li>
                        </ul>
                    </div>
					<div class="row" id="listSize">
						<h3>listSize <small>菜单显示的项目个数，其它的项目以滚动条滚动方式展现</small></h3>
						<ul>
							<li><strong>类型：</strong><code>number</code></li>
							<li><strong>默认值：</strong><code>10</code></li>
							<li><strong>使用方式：</strong>
								<div class="usageBox">
								<p>菜单的高度以显示多少个项目为准</p>
								</div>
							</li>
						</ul>
					</div>
					<div class="row" id="selectToCloseList">
						<h3>selectToCloseList <small>选中项目后关闭菜单</small></h3>
						<ul>
							<li><strong>类型：</strong><code>boolean</code></li>
							<li><strong>默认值：</strong><code>true</code></li>
							<li><strong>使用方式：</strong>
								<div class="usageBox">
								设置在选中项目后，关闭列表，仅multiple: true模式下可用
								</div>
							</li>
						</ul>
					</div>
					<div class="row" id="formatItem">
						<h3>formatItem <small>列表项目显示内容格式化</small></h3>
						<ul>
							<li><strong>类型：</strong><code>function</code></li>
							<li><strong>默认值：</strong><code>无</code></li>
							<li><strong>使用方式：</strong>
								<div class="usageBox">
								参数1：data，行数据object格式
								返回：string
								</div>
							</li>
						</ul>
					</div>
					<div class="row" id="andOr">
						<h3>andOr <small>查询方式 ('AND' or 'OR')</small></h3>
						<ul>
							<li><strong>类型：</strong><code>string</code></li>
							<li><strong>默认值：</strong><code>'AND'</code></li>
							<li><strong>使用方式：</strong>
								<div class="usageBox">								
								<p>andOr : 'OR'</p>
								<p>参数指定了插件在使用多关键字过滤时，处理的逻辑，多关键字之间使用半角空格隔开</p>
								</div>
							</li>
						</ul>
					</div>
					<div class="row" id="orderBy">
						<h3>orderBy <small>数据排序方式</small></h3>
						<ul>
							<li><strong>类型：</strong><code>array</code></li>
							<li><strong>默认值：</strong><code>使用showField指定的列进行升序排列</code></li>
							<li><strong>使用方式：</strong>
								<div class="usageBox">
								<p>orderBy : ['id desc','name']</p>
								<p>若只指定了列，而不指定排序方式，则默认使用Asc升序排列，列和排序方式之间使用半角空格隔开</p>
								</div>
							</li>
						</ul>
					</div>
					<div class="row" id="eSelect">
						<h3>eSelect <small>事件回调，响应菜单项目被选中后的事件处理</small></h3>
						<ul>
							<li><strong>类型：</strong><code>function</code></li>
							<li><strong>默认值：</strong><code>无</code></li>
							<li><strong>使用方式：</strong>
								<div class="usageBox">
								参数：data：选中行的原始JSON数据
								<p><code>eSelect : function(data){ $('xxx').val(data.name + data.sex); }</code></p>
								</div>
							</li>
						</ul>
					</div>
					<div class="row" id="eTabSwitch">
						<h3>eTabSwitch <small>事件回调，响应高级菜单的多分组模式下，分组切换的事件</small></h3>
						<ul>
							<li><strong>类型：</strong><code>function</code></li>
							<li><strong>默认值：</strong><code>无</code></li>
							<li><strong>使用方式：</strong>
								<div class="usageBox">
								参数：
								<p>index: 切换后的分组下标号，下标从0开始</p>
								<p>tab: 分组的数据，不包含 list 数据</p>
								<p><code>eTabSwitch : function(index, tab){ do something... }</code></p>
								</div>
							</li>
						</ul>
					</div>
					<div class="row" id="eHidden">
						<h3>eHidden <small>事件回调，响应菜单隐藏后的事件</small></h3>
						<ul>
							<li><strong>类型：</strong><code>function</code></li>
							<li><strong>默认值：</strong><code>无</code></li>
							<li><strong>使用方式：</strong>
								<div class="usageBox">
								参数：data：选中行的原始JSON数据
								<p><code>eHidden : function(data){ $('xxx').val(data.name + data.sex); }</code></p>
								</div>
							</li>
						</ul>
					</div>
					<div class="row" id="selectMenuHide">
						<h3>$.fn.selectMenuHide <small>关闭菜单栏</small></h3>
						<ul>
							<li><strong>类型：</strong><code>function</code></li>
							<li><strong>默认值：</strong><code>无</code></li>
							<li><strong>使用方式：</strong>
								<div class="usageBox">
								<p><code>$('#someone').selectMenuHide();</code></p>
								</div>
							</li>
						</ul>
					</div>
					<div class="row" id="selectMenuClear">
						<h3>$.fn.selectMenuClear <small>清除已选择的菜单项目（高级模式下）</small></h3>
						<ul>
							<li><strong>类型：</strong><code>function</code></li>
							<li><strong>默认值：</strong><code>无</code></li>
							<li><strong>使用方式：</strong>
								<div class="usageBox">
								<p><code>$('#someone').selectMenuClear();</code></p>
								</div>
							</li>
						</ul>
					</div>
					<div class="row" id="selectMenuValues">
						<h3>$.fn.selectMenuValues <small>获得选中项目的数据（高级模式下）</small></h3>
						<ul>
							<li><strong>类型：</strong><code>function</code></li>
							<li><strong>默认值：</strong><code>无</code></li>
							<li><strong>使用方式：</strong>
								<div class="usageBox">
								<p><code>var data = $('#someone').selectMenuValues();//[Object,Object,...]</code></p>
								</div>
							</li>
						</ul>
					</div>
				</div>
			</div>
        </div>
    </div>


    <script type="text/javascript" src="../lib/jquery.min.js" ></script>
    <script type="text/javascript" src="../lib/syntaxhighlighter/scripts/shCore.js" ></script>
    <script type="text/javascript" src="../lib/syntaxhighlighter/scripts/shBrushXml.js" ></script>
    <script type="text/javascript" src="../lib/syntaxhighlighter/scripts/shBrushCss.js" ></script>
    <script type="text/javascript" src="../lib/syntaxhighlighter/scripts/shBrushJava.js" ></script>
    <script type="text/javascript" src="../lib/syntaxhighlighter/scripts/shBrushJScript.js" ></script>

    <script type="text/javascript" src="../lib/nav/jquery.nav.js" ></script>
    <script type="text/javascript" src="../lib/stickUp/stickUp.min.js" ></script>

    <script type="text/javascript" src="../lib/selectmenu/selectmenu.min.js" ></script>
    <script type="text/javascript" src="../js/docs.js" ></script>
    <script type="text/javascript" src="../js/common.js" ></script>
    <script type="text/javascript">
        $(function(){
            SyntaxHighlighter.all();
            setActive('mnuDocs');
        });
    </script>

</body>
</html>